<template>
  <div class="box">
    <img src="../../assets/images/down.png" alt="" class="bg" />
    <div class="con">
      <img :src="appLogo" alt="" class="logo" />
      <div class="title">
        <h3>{{ appName }}</h3>
        <p>
          版本4.0.4 更新时间：<span>{{ createTime }}</span>
        </p>
      </div>
      <div class="code">
        <vue-qr :text="path" :size="150"></vue-qr>
      </div>
      <p class="text">手机扫描二维码安装</p>
      <div class="down">
        <button @click="Android">Android下载</button>
        <button @click="ios">IOS下载</button>
      </div>
    </div>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
export default {
  components: {
    vueQr
  },
  data() {
    return {
      iosUrl: '',
      androidUrl: '',
      appLogo: '',
      createTime: '',
      appName: '',
      path: window.location.href
    }
  },
  mounted() {
    console.log(JSON.parse(localStorage.getItem('link')), 1234567879879)
    this.iosUrl = JSON.parse(localStorage.getItem('link')).iosUrl
    this.androidUrl = JSON.parse(localStorage.getItem('link')).androidUrl
    this.appLogo = JSON.parse(localStorage.getItem('link')).appLogo
    this.createTime = JSON.parse(localStorage.getItem('link')).createTime
    this.appName = JSON.parse(localStorage.getItem('link')).appName
    console.log(this.link)
    console.log(this.appLogo, '000')
    console.log(this.androidUrl, '111')
    console.log(this.appName, '222')
    console.log(this.path)
  },
  methods: {
    Android() {
      this.$router.push({
        path: './Android',
        query: { androidUrl: this.androidUrl }
      })
    },
    ios() {
      this.$router.push({ path: './ios', query: { ios: this.iosUrl } })
      console.log(this.iosUrldUrl)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  .bg {
    width: 100%;
    height: 100%;
  }
  .con {
    width: 100%;
    position: absolute;
    top: 5%;
    left: 50%;
    margin-left: -50%;
    text-align: center;
    .logo {
      width: 70px;
      margin-bottom: 20px;
      border-radius: 10px;
      box-shadow: 1px 5px 10px rgb(71, 71, 71);
    }
    .title {
      text-align: center;
      h3 {
        font-size: 25px;
        margin-bottom: 20px;
        font-weight: normal;
      }
      p {
        margin: 15px;
      }
    }
    .code {
      width: 150px;
      margin: auto;
    }
    .text {
      margin: 5px 0 3px;
    }
    .down {
      display: flex;
      flex-direction: column;
      width: 30%;
      margin: 20px auto;
      align-items: center;
      button {
        margin: 9px 0;
        background: #0084d7;
        outline: none;
        border-radius: 20px;
        color: #fff;
        height: 40px;
        width: 130px;
        border: 3px solid #0374c0;
        box-shadow: 1px 4px 8px #5c5b5b;
      }
    }
  }
}
</style>
